<template>
  <div>
    <el-row>
      <el-col :span="20" :offset="2" style="margin-top:1rem;text-align:right;">
        <el-button @click="handleAdd">
          新增
        </el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="20" :offset="2" style="margin-top:1rem;">
        <el-radio-group v-model="list_subjectTypeId" size="small">
          <el-radio-button label="0">全部</el-radio-button>
          <el-radio-button label="1">填空题</el-radio-button>
          <el-radio-button label="2">单选题</el-radio-button>
          <el-radio-button label="3">判断题</el-radio-button>
          <el-radio-button label="4">问答题</el-radio-button>
          <el-radio-button label="5">多选题</el-radio-button>
        </el-radio-group>
      </el-col>
      <el-col :span="20" :offset="2" style="margin-top:1rem;">
        <el-table :data="tableData" border style="width: 100%">

          <el-table-column prop="subjectTypeId" label="题目类型" :formatter="formatSubjectType" width="80">
          </el-table-column>
          <el-table-column prop="stem" label="题干">
          </el-table-column>
          <el-table-column prop="options" label="选项" width="150">
          </el-table-column>
          <el-table-column prop="answer" label="答案">
          </el-table-column>
          <el-table-column prop="createTime" label="创建日期" width="150">
          </el-table-column>
          <el-table-column prop="updateTime" label="修改日期" width="150">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
              &nbsp;
              <el-popconfirm title="删除后数据不可恢复，是否确定要删除这条数据？" icon="el-icon-info" iconColor="red"
                @onConfirm="handleDelete(scope.row)">
                <el-button slot="reference" type="text" size="small">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <el-row>
      <el-col style="margin-top:2rem;" :span="10" :offset="8">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="current_page" :page-sizes="[10, 20, 50, 100]" :page-size="limit"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </el-col>
    </el-row>

    <el-dialog title="编辑或新增题目" :visible.sync="dialogVisible" width="100%">
      <el-row>
        <el-col style="margin-top:1rem;">
          <el-radio-group v-model="subjectTypeId">
            <el-radio :label="1">填空题</el-radio>
            <el-radio :label="2">单选题</el-radio>
            <el-radio :label="3">判断题</el-radio>
            <el-radio :label="4">问答题</el-radio>
            <el-radio :label="5">多选题</el-radio>
          </el-radio-group>
        </el-col>
      </el-row>
      <el-row>
        <el-col style="margin-top:2rem;">
          <el-input type="textarea" :rows="2" placeholder="
          题干，所有类型的题目都需要输入" v-model="stem">
          </el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col style="margin-top:1rem;">
          <el-input type="textarea" :rows="4" placeholder="
          选项，选择题需要将选项填在这里，选项间以$$分割" v-model="options">
          </el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col style="margin-top:1rem;">
          <el-input type="textarea" :rows="8" placeholder="
          答案，
          1）填空题,每个答案之间以$$分割
          2）单选题，直接填上完整选项
          3）多选题，选项间以$$分割
          4）判断题，1表示正确，0表示错误
          5）问答题，直接填写答案
          " v-model="answer">
          </el-input>
        </el-col>
      </el-row>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="doupload">确 定</el-button>
      </span>
    </el-dialog>


  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    methods: {
      //编辑题目时触发
      handleClick(row) {
        //标记编辑
        this.method = "put"
        //该行数据写入文本框
        this.subjectId = row.subjectId
        this.subjectTypeId = row.subjectTypeId
        this.stem = row.stem
        this.options = row.options
        this.answer = row.answer

        this.dialogVisible = true //显示模态框
      },
      //新增题目时触发
      handleAdd() {
        //标记新增
        this.method = "post"
        //初始化数据
        this.subjectId = ""
        this.subjectTypeId = 1
        this.stem = ""
        this.options = ""
        this.answer = ""

        this.dialogVisible = true //显示模态框
      },
      //删除题目时触发
      handleDelete(row) {
        axios.delete("http://localhost:8079/subject/" + row.subjectId).then(data => {
          if (data.data.code == 200) {
            this.$message({
              message: '删除数据成功',
              type: 'success'
            });
            this.getSubjects(this.current_page, this.limit)
          } else {
            this.$message.error(data.data.message);
          }
        })
      },
      //模态框内点击确定后触发
      doupload() {
        let subject = {
          subjectId: this.subjectId,
          subjectTypeId: this.subjectTypeId,
          stem: this.stem,
          options: this.options,
          answer: this.answer
        }
        this.uploadData(this.method, subject)
      },
      //上传数据
      uploadData(type, data) {
        if (type == "post") {
          axios.post("http://localhost:8079/subject/", data).then(data => {
            if (data.data.code == 200) {
              this.dialogVisible = false //关闭模态框
              this.getSubjects(this.list_subjectTypeId,this.current_page, this.limit)
              this.$message({
                message: '新增数据成功',
                type: 'success'
              });
            } else {
              this.$message.error(data.data.message);
            }
          })
        }
        if (type == "put") {
          axios.put("http://localhost:8079/subject/", data).then(data => {
            if (data.data.code == 200) {
              this.dialogVisible = false //关闭模态框
              this.getSubjects(this.list_subjectTypeId,this.current_page, this.limit)
              this.$message({
                message: '更新数据成功',
                type: 'success'
              });
            } else {
              this.$message.error(data.data.message);
            }

          })
        }
      },
      //分页，每页显示数量发生变化触发
      handleSizeChange(size) {
        this.limit = size
        this.getSubjects(this.list_subjectTypeId,this.current_page, this.limit)
      },
      //分页，当前页发生变化触发
      handleCurrentChange(current_page) {
        this.current_page = current_page
        this.getSubjects(this.list_subjectTypeId,this.current_page, this.limit)
      },
      //获取所有题目分页数据
      getSubjects(subjectTypeId,page, limit) {
        axios.get("http://localhost:8079/subject/?page=" + (page - 1) + "&limit=" + limit+"&subjectTypeId=" + subjectTypeId).then(data => {
          this.tableData = data.data.data.subjects
          this.size = data.data.data.page.limit
          this.total = data.data.data.page.total
        })
      },

      //题目类型格式化
      formatSubjectType(row, cpl, val) {
        if (val == 1) {
          return "填空题"
        } else if (val == 2) {
          return "单选题"
        } else if (val == 3) {
          return "判断题"
        } else if (val == 4) {
          return "问答题"
        } else if (val == 5) {
          return "多选题"
        }
      }

    },

    data() {
      return {
        tableData: [],
        limit: 10,
        current_page: 1,
        total: 0,
        //标记当前选择的分类
        list_subjectTypeId:0,

        //弹框
        dialogVisible: false,

        //题目
        subjectId: "",
        subjectTypeId: 1,
        stem: "",
        options: "",
        answer: "",

        //用来标记是编辑还是新增
        methd: "post",
      }
    },
    created() {
      this.getSubjects(this.list_subjectTypeId,1, 10)
    },
    watch: {
            'list_subjectTypeId': function (newVal) {
                this.getSubjects(newVal, 1, this.limit)
                this.current_page=1
            }
        },
  }
</script>